<template>
  <el-main>
    <h2>收房合同录入</h2>
    <template>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick" >
        <el-tab-pane label="合同信息" name="first" >
          <el-button type="info" @click="c_chooseRoom">选择房产</el-button>

          <el-form ref="save" :model="save" label-width="80px">
            <div>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="*小区名称">
                    <el-input v-model="save.premiseName" readonly style="width: 250px"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="0">

                </el-col>
                <el-col :span="12">
                  <el-form-item label="*房产信息">
                    <el-input v-model="save.houseInfo" readonly style="width: 250px"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="*所有权类型">
                    <el-select v-model="form.houseType" placeholder="请选择活动区域">
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="*房产证书编号">
                    <el-input v-model="save.houseZsNo" style="width: 250px"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="*产权地址">
                    <el-input v-model="save.cqAddress" style="width: 250px"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>

            <div>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="*业主姓名">
                    <el-input v-model="save.ownerName" style="width: 250px"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  是否为签约人
                  <el-select v-model="form.tenantCertificateType" placeholder="身份证">
                    <el-option label="身份证" value="1"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="*业主证件号码">
                    <el-input v-model="save.ownerIdCard" style="width: 250px"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="*业主手机号">
                    <el-input v-model="save.ownerMobile" style="width: 250px"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="*业主联系地址">
                    <el-input v-model="save.ownerContactAddress" style="width: 250px"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="8">
                  <el-form-item label="*业主姓名">
                    <el-input v-model="save.ownerName" style="width: 250px"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  是否为签约人
                  <el-select v-model="form.tenantCertificateType" placeholder="身份证">
                    <el-option label="身份证" value="1"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="*业主证件号码">
                    <el-input v-model="save.ownerIdCard" style="width: 250px"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="*业主手机号">
                    <el-input v-model="save.ownerMobile" style="width: 250px"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="*紧急联系电话">
                    <el-input v-model="save.signUserEmergencyPhone" style="width: 250px"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="*账户类型">
                    <el-select v-model="form.accountType" placeholder="请选择" @change="git(form.accountType)">
                      <el-option label="请选择" value="0"></el-option>
                      <el-option label="对公账号" value="1"></el-option>
                      <el-option label="对私账号" value="2"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row v-show="si">
                <el-col :span="12" >
                  <el-form-item label="开户省份">
                    <el-select v-model="form.bankAccountProvince" placeholder="请选择">
                      <el-option label="请选择" value=""></el-option>
                      <el-option label="北京市" value="1"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="请选择">
                    <el-select v-model="form.bankName" placeholder="请选择">
                      <el-option label="请选择" value="1"></el-option>
                      <el-option label="北京市" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row v-show="gong">
                <el-col :span="12">
                  <el-form-item label="开户支行">
                    <el-input v-model="save.bankOpen" style="width: 250px"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="联行行号">
                    <el-input v-model="save.bankBranchCodeLh" style="width: 250px"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row v-show="si">
                <el-col :span="12">
                  <el-form-item label="账户姓名">
                    <el-input v-model="save.accountName" style="width: 250px"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="银行卡号">
                    <el-input v-model="save.bankCardNumber" style="width: 250px"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>

            <div>
              <el-row>
                <el-form-item label="*租约期限">
                  <el-date-picker
                    v-model="form.inputDateStart"
                    type="date"
                    value-format="yyyy-MM-dd">
                  </el-date-picker>至
                  <el-date-picker
                    v-model="form.inputDateEnd"
                    type="date"
                    value-format="yyyy-MM-dd">
                  </el-date-picker>
                </el-form-item>
                <el-button type="primary">主要按钮</el-button>

              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="*租金">
                    <el-input v-model="save.monthRent" style="width: 250px"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="*房产押金">
                    <el-input v-model="save.depositMoney" style="width: 250px"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-form-item label="*支付方式">
                  押
                  <el-select v-model="form.depositType" placeholder="请选择">
                    <el-option label="0" value="0"></el-option>
                    <el-option label="1" value="1"></el-option>
                    <el-option label="2" value="2"></el-option>
                    <el-option label="3" value="3"></el-option>
                  </el-select>
                  付
                  <el-select v-model="form.depositType" placeholder="请选择">
                    <el-option label="1" value="1"></el-option>
                    <el-option label="2" value="2"></el-option>
                    <el-option label="3" value="3"></el-option>
                    <el-option label="4" value="4"></el-option>
                    <el-option label="5" value="5"></el-option>
                    <el-option label="6" value="6"></el-option>
                  </el-select>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="备注">
                  <el-input type="textarea" v-model="form.remark" style="width: 300px;"></el-input>
                </el-form-item>
              </el-row>
            </div>

          </el-form>



          <el-button type="info" @click="">取消</el-button>
          <el-button type="info" @click="c_oneGo">下一步</el-button>

        </el-tab-pane>
        <el-tab-pane label="附件" name="second" >

          <el-form ref="save1" :model="save.save1" label-width="80px">

            <el-upload
              class="avatar-uploader"
              action="http://localhost/dev-api/file/upload/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>


          </el-form>


          <el-button type="info" @click="c_twoBack">上一步</el-button>
          <el-button type="info" @click="c_twoGo">跳过</el-button>
          <el-button type="info" @click="c_twoGo">下一步</el-button>
        </el-tab-pane>
        <el-tab-pane label="付款单" name="third" >

          <el-button type="info" @click="c_threeBack">上一步</el-button>
        </el-tab-pane>
      </el-tabs>
    </template>

    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="小区名称">
          <el-input v-model="form.premiseName"></el-input>
        </el-form-item>
        <el-form-item label="租房类型">
          <el-select v-model="form.leaseType" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="listsearchSfListByXy">立即创建</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="premiseName"
          label="房产信息"
          width="180">
        </el-table-column>
        <el-table-column
          prop="roomHall"
          label="居室"
          width="180">
        </el-table-column>
        <el-table-column
          prop="leaseType"
          label="租房">
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作">
          <template slot-scope="scope">
            <el-link type="warning" @click="handleEdit(sscope.row)">选中</el-link>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="form.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-dialog>
  </el-main>
</template>

<script>
  import { searchSfListByXy } from "@/api/shoufang/shoufang";

  export default {
    name: "shoufangadd",
    data(){
      return{
        activeName:'first',
        dialogTableVisible:false,
        tableData:[],
        form:{
          pageNum:1,
          pageSize:5,
        },
        currentPage:0,
        total:0,
        save:{
          save1:{},
          save2:{},
        },
        imageUrl: '',
        gong:false,
        si:false,
      }
    },
    methods:{
      git(accountType) {
        if(accountType==1){
          this.gong=true;
          this.si=true;
        }else if (accountType==2){
          this.gong=false;
          this.si=true;
        }
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      handleSizeChange(pageSize) {
        this.form.pageSize=pageSize;
        this.onSubmit();
      },
      handleCurrentChange(pageNum) {
        this.form.pageNum=pageNum;
        this.onSubmit();
      },
      handleClick(tab, event) {

      },
      c_chooseRoom(){
        this.dialogTableVisible=true;

      },
      c_oneGo() {
        this.activeName="second";
      },
      c_twoBack() {
        this.activeName="first";
      },
      c_twoGo() {
        this.activeName="third";
      },
      c_threeBack() {
        this.activeName="second";
      },
      listsearchSfListByXy(){
        console.log(this.form);
        searchSfListByXy(this.form).then(Response=>{
          console.log(Response);
          this.tableData=Response.data.list;
          this.currentPage=Response.data.pageNum;
          this.total=Response.data.total;
        })
      }
    },
    created() {
      this.listsearchSfListByXy();
    }
  }
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
